import React, { Component, useRef } from 'react';

import '../../styles/home/Swiper.scss'

import '../../styles/home/home.scss'

import { Swiper } from 'antd-mobile'

import MyHeader from '../../components/home/MyHeader.jsx';
import Mylist from '../../components/home/MyList.jsx'
import MyToday from '../../components/home/MyToday.jsx';
import MyBanner from '../../components/home/MyBanner.jsx'
import { index_banner } from "../../api/index";

class Home extends Component {
    state = { list: [] }
    async componentDidMount() {
        var res = await index_banner()
        console.log(res.data);
        this.setState({ list: res.data.list })
    }
    render() {
        return (
            <div className='home'>
                <MyHeader></MyHeader>
                <Swiper autoplay loop>
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <Swiper.Item key={index}>
                                    <img src={item.pic} alt="" />
                                </Swiper.Item>
                            )
                        })
                    }
                </Swiper>
                <Mylist></Mylist>
                <MyBanner></MyBanner>
                <MyToday></MyToday>
                


            </div>
        );
    }
}

export default Home;